<template>
  <div>
    <div ref="__div" style="color: #FFF;background: #409EFF;height: 200px;width: 200px;display: flex;justify-content: center;align-items: center">测试区域</div>
    <my-button @click="test" style="margin-top: 20px">点击截图</my-button>
  </div>
</template>

<script>
  import MyButton from '../../../common/my-button'
  import { toImage } from '@/util/utils'
  export default {
    name: 'index',
    components: { MyButton },
    methods: {
      async test(){
        const imgBase64 = await toImage(this.$refs.__div);
        const a = document.createElement('a');
        a.style.display = 'none';
        a.setAttribute('target', '_blank');
        a.setAttribute('download', '测试图片.jpg');
        a.href = imgBase64;
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
      }
    }
  }
</script>

<style scoped>

</style>
